<%@page contentType="text/html; charset=utf-8"%>

<title>系统用户</title>

	
<div class="page-content">



	<div class="row">
		<div class="col-xs-12">
			<!-- PAGE CONTENT BEGINS -->
			
				<div class="row">
					<div class="col-xs-12">
						<div class="btn-group">
							<button id="add-bto" class="btn btn-primary btn-sm">
								<i class="glyphicon glyphicon-plus"></i>添加
							</button>
							<button id="edit-bto" class="btn btn-info btn-sm">
								<i class="ace-icon fa fa-pencil-square-o"></i>编辑
							</button>
							<button id="del-bto" class="btn btn-danger btn-sm">
								<i class="ace-icon fa fa-trash"></i>删除
							</button>
							<button id="search-bto" class="btn btn-purple btn-sm">
								<i class="ace-icon fa fa-search"></i>搜索
							</button>
							<button id="reload-bto" class="btn btn-success btn-sm">
								<i class="ace-icon fa fa-refresh"></i>刷新
							</button>
						</div>
						<a href="#modal-form" role="button" class="blue" data-toggle="modal"> Form Inside a Modal Box </a>
						<br>
						<a href="#" id="id-btn-dialog1" class="btn btn-purple btn-sm">Modal Dialog</a>
					</div>
				</div>
				
				<div class="space-6"></div>
				
				<div class="row">
					<div class="col-xs-12">
						<table id="dataTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
							<thead>
								
							</thead>
						</table>
					</div>
				</div>
						
				<div id="dialog-message" class="hide">
					<p>
						This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
					</p>

					<div class="hr hr-12 hr-double"></div>

					<p>
						Currently using
						<b>36% of your storage space</b>.
					</p>
				</div><!-- #dialog-message -->	
					
				<div id="modal-form" class="modal" tabindex="-1">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal">&times;</button>
								<h4 class="blue bigger">Please fill the following form fields</h4>
							</div>
		
							<div class="modal-body">
								<div class="row">
									<div class="col-xs-12 col-sm-5">
										<div class="space"></div>
		
										<input type="file" />
									</div>
		
									<div class="col-xs-12 col-sm-7">
										<div class="form-group">
											<label for="form-field-select-3">Location</label>
		
											<div>
												<select class="chosen-select" data-placeholder="Choose a Country...">
													<option value="">&nbsp;</option>
													<option value="AL">Alabama</option>
													<option value="AK">Alaska</option>
													<option value="AZ">Arizona</option>
													<option value="AR">Arkansas</option>
													<option value="CA">California</option>
													<option value="CO">Colorado</option>
													<option value="CT">Connecticut</option>
													<option value="DE">Delaware</option>
													<option value="FL">Florida</option>
													<option value="GA">Georgia</option>
													<option value="HI">Hawaii</option>
													<option value="ID">Idaho</option>
													<option value="IL">Illinois</option>
													<option value="IN">Indiana</option>
													<option value="IA">Iowa</option>
													<option value="KS">Kansas</option>
													<option value="KY">Kentucky</option>
													<option value="LA">Louisiana</option>
													<option value="ME">Maine</option>
													<option value="MD">Maryland</option>
													<option value="MA">Massachusetts</option>
													<option value="MI">Michigan</option>
													<option value="MN">Minnesota</option>
													<option value="MS">Mississippi</option>
													<option value="MO">Missouri</option>
													<option value="MT">Montana</option>
													<option value="NE">Nebraska</option>
													<option value="NV">Nevada</option>
													<option value="NH">New Hampshire</option>
													<option value="NJ">New Jersey</option>
													<option value="NM">New Mexico</option>
													<option value="NY">New York</option>
													<option value="NC">North Carolina</option>
													<option value="ND">North Dakota</option>
													<option value="OH">Ohio</option>
													<option value="OK">Oklahoma</option>
													<option value="OR">Oregon</option>
													<option value="PA">Pennsylvania</option>
													<option value="RI">Rhode Island</option>
													<option value="SC">South Carolina</option>
													<option value="SD">South Dakota</option>
													<option value="TN">Tennessee</option>
													<option value="TX">Texas</option>
													<option value="UT">Utah</option>
													<option value="VT">Vermont</option>
													<option value="VA">Virginia</option>
													<option value="WA">Washington</option>
													<option value="WV">West Virginia</option>
													<option value="WI">Wisconsin</option>
													<option value="WY">Wyoming</option>
												</select>
											</div>
										</div>
		
										<div class="space-4"></div>
		
										<div class="form-group">
											<label for="form-field-username">Username</label>
		
											<div>
												<input type="text" id="form-field-username" placeholder="Username" value="alexdoe" />
											</div>
										</div>
		
										<div class="space-4"></div>
		
										<div class="form-group">
											<label for="form-field-first">Name</label>
		
											<div>
												<input type="text" id="form-field-first" placeholder="First Name" value="Alex" />
												<input type="text" id="form-field-last" placeholder="Last Name" value="Doe" />
											</div>
										</div>
									</div>
								</div>
							</div>
		
							<div class="modal-footer">
								<button class="btn btn-sm" data-dismiss="modal">
									<i class="ace-icon fa fa-times"></i>
									Cancel
								</button>
		
								<button class="btn btn-sm btn-primary">
									<i class="ace-icon fa fa-check"></i>
									Save
								</button>
							</div>
						</div>
					</div>
				</div>	
			<!-- PAGE CONTENT ENDS -->
		</div><!-- /.col -->
	</div><!-- /.row -->


</div>
<link rel="stylesheet" href="${ctx}/static/admin/ace/css/jquery-ui.css" />
<script src="${ctx}/static/admin/ace/js/bootstrap.js"></script>
<%@include file="/WEB-INF/views/common/dataTable-js.jspf"%>
<script src="${ctx}/static/admin/ace/js/jquery-ui.js"></script>
<script src="${ctx}/static/admin/ace/js/jquery.ui.touch-punch.js"></script>
<script type="text/javascript">
	$(function(){
		
		$( "#id-btn-dialog1" ).on('click', function(e) {
			e.preventDefault();
	
			var dialog = $( "#dialog-message" ).removeClass('hide').dialog({
				modal: true,
				title: "<div class='widget-header widget-header-small'><h4 class='smaller'><i class='ace-icon fa fa-check'></i> jQuery UI Dialog</h4></div>",
				title_html: true,
				buttons: [ 
					{
						text: "Cancel",
						"class" : "btn btn-xs",
						click: function() {
							$( this ).dialog( "close" ); 
						} 
					},
					{
						text: "OK",
						"class" : "btn btn-primary btn-xs",
						click: function() {
							$( this ).dialog( "close" ); 
						} 
					}
				]
			});
	
			/**
			dialog.data( "uiDialog" )._title = function(title) {
				title.html( this.options.title );
			};
			**/
		});
		
		$('#modal-form input[type=file]').ace_file_input({
			style:'well',
			btn_choose:'Drop files here or click to choose',
			btn_change:null,
			no_icon:'ace-icon fa fa-cloud-upload',
			droppable:true,
			thumbnail:'large'
		})
		
		//chosen plugin inside a modal will have a zero width because the select element is originally hidden
		//and its width cannot be determined.
		//so we set the width after modal is show
		$('#modal-form').on('shown.bs.modal', function () {
			if(!ace.vars['touch']) {
				$(this).find('.chosen-container').each(function(){
					$(this).find('a:first-child').css('width' , '210px');
					$(this).find('.chosen-drop').css('width' , '210px');
					$(this).find('.chosen-search input').css('width' , '200px');
				});
			}
		})
		
		var t ;
		$.post("${ctx}/admin/sys/user/datagrid", function(result){
			var courseArrayData= new Array();  
			
			for(var j=0; j<result.aaData.length ;j++) {  
		        var meetInfoArr= new Array();  
		        var meetInfoObj = result.aaData[j];  
		        meetInfoArr.push(meetInfoObj['id']);   
		        meetInfoArr.push(meetInfoObj['username']);   
		        meetInfoArr.push("<a class='blue' href='#'><i class='ace-icon fa fa-search-plus bigger-130'></i></a>");  
		        courseArrayData.push(meetInfoArr);  
		 	}
			//console.info(courseArrayData) ;
			
			t = $("#dataTable").DataTable({
				//"bProcessing": true,
				//"bServerSide": true,
				"sPaginationType" : "full_numbers",
				//"sServerMethod": "POST",
		        "language": { "url": "${ctx}/static/json/dataTable-language.json" },
				//"sAjaxSource": "${ctx}/admin/sys/user/datagrid",
				"searching": false,
				"aaData": courseArrayData,
				"bLengthChange": true,  
		        "aoColumns": [  
		        {  
		            "sTitle": "编号22222",  
		            "sClass": "center"   
		        },
		        {  
		            "sTitle": "用户名",  
		            "sClass": "center"  
		        },
		        {  
		            "sTitle": "密码",  
		            "sClass": "center"  
		        }],
		        /* "columnDefs": [{
		            "searchable": false,
		            "orderable": false,
		            "targets": 0
		        }], */	//序号
				/* "aoColumns": [
					{"mData": "id"},
					{"mData": "username", "sDefaultContent": ""}, 
					{"mData": "password"},
				], */
				
			});
			
			//序号
			/* t.on('order.dt search.dt', function() {
		        t.column(0, {
		            search: 'applied',
		            order: 'applied'
		        }).nodes().each(function(cell, i) {
		            cell.innerHTML = i + 1;
		        });
		    }).draw(); */
			
			t.on("click", "th input:checkbox" , function(){
				var that = this;
				$(this).closest('table').find('tr > td:first-child input:checkbox')
				.each(function(){
					this.checked = that.checked;
					$(this).closest('tr').toggleClass('selected');
				});
			});
			
			
		}, "JSON");
		
	});
</script>


